import React, { useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input, Modal } from "antd";
import "./login.scss";
const App = (props) => {
  let { open, ShowOpen } = props;

  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  const url = [
    { icon: "../../../../../public/login_icon/微信.png", text: "微信扫码" },
    { icon: "../../../../../public/login_icon/邮箱.png", text: "邮箱用户名" },
    { icon: "../../../../../public/login_icon/企业微信.png", text: "企业微信" },
    { icon: "../../../../../public/login_icon/qq.png", text: "QQ" },
    { icon: "../../../../../public/login_icon/更多.png", text: "更多" },
  ];

  return (
    <>
      <Modal
        className="login-box"
        centered
        open={open}
        onOk={() => ShowOpen(false)}
        onCancel={() => ShowOpen(false)}
        width={800}
        footer={null}
      >
        <div className="login-box-left">
          <img
            style={{
              width: "280px",
              height: "560px",
              borderRadius: "8px 0 0 8px",
            }}
            src="https://asset.eqh5.com/d6dc6227ec874d8c96c6815f1177039e.png?imageMogr2/quality/80/format/webp/"
            alt=""
          />
        </div>
        <div className="login-box-right">
          <div className="login-box-right-header">
            <div>
              <span className="login-box-right-header-phone">扫码登陆</span>
              <img
                className="login-box-right-Two-dimensionalCode"
                src="https://www.eqxiu.com/auth/images/btn-qrcode@2x.png"
                alt=""
              />
            </div>
          </div>
          <div className="login-box-right-main">
            <div className="login-box-right-main-box">
              <h1 className="login-box-right-main-box-title">手机密码登陆</h1>
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  remember: true,
                }}
                onFinish={onFinish}
              >
                <Form.Item
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: "Please input your Username!",
                    },
                  ]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="请输入手机号"
                  />
                </Form.Item>
                <Form.Item
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: "Please input your Password!",
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="请输入密码"
                  />
                </Form.Item>
                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                  >
                    登陆
                  </Button>
                </Form.Item>
              </Form>

              <a href="">手机验证码登陆</a>
              <a href="" className="from-a-ForgotPassword">
                忘记密码
              </a>
            </div>
          </div>

          <div className="login-box-right-footer">
            <div className="other-login-line">
              <div className="labes">其他登陆方式</div>
            </div>
            <div className="third-login">
              <div className="login-icon">
                {url.map((item, index) => {
                  return (
                    <div className="icon-box" key={index}>
                      <div className="box-center">
                        <div className="box-icon">
                          <img src={item.icon} />
                        </div>
                        <div className="box-text">{item.text}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="yiqixiu-login-agreement">
              <div className="yiqixiu-login-agreement-text">
                您登录即同意易企秀
                <a href="" className="from-a-yiqixiu-login-agreement">
                  《用户服务协议》
                </a>
                <a href="" className="from-a-yiqixiu-login-agreement">
                  《隐私政策》
                </a>
                <a href="" className="from-a-yiqixiu-login-agreement">
                  《授权许可协议》
                </a>
                ，如您成为易企秀会员，即视为同意
                <a href="" className="from-a-yiqixiu-login-agreement">
                  《会员服务协议》
                </a>
              </div>
              <span className="login-line"></span>
              <a href="" className="toReg">
                手机号注册
              </a>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};
export default App;
